<template>
  <div>
    （仅展示最近30天数据）
    <ve-line :data="chartData"></ve-line>
    <a-table
      :columns="columns"
      :data-source="tableData"
      class="noBorderIncludePages"
    ></a-table>
  </div>
</template>
<script>
import { timeAnalysis } from '@/api/activity'
export default {
  name: 'timeComponent',
  props: ['data'],
  data() {
    return {
      chartData: {
        columns: ['date', '总转发数', '总浏览数', '总报名数'],
        rows: [],
      },
      tableData: [],
      columns: [
        {
          title: '日期',
          dataIndex: 'time',
          key: 'time',
        },
        {
          title: '总报名数',
          key: 'sign_up_number',
          dataIndex: 'sign_up_number',
          align:'center'
        },
        {
          title: '总浏览数',
          dataIndex: 'views_number',
          key: 'views_number',
          align:'center'
        },
        {
          title: '总转发数',
          key: 'forward_number',
          dataIndex: 'forward_number',
          align:'center'
        },
      ],
    }
  },
  created() {
    timeAnalysis(this.data.id).then((res) => {
      let params = JSON.parse(JSON.stringify(res))
      let arr = []
      params.forEach((val) => {
        arr.push({
          date: val.time,
          总浏览数: val.views_number,
          总转发数: val.forward_number,
          总报名数: val.sign_up_number,
        })
      })
      console.log(params)
      this.tableData = params
      this.chartData.rows = arr
    })
  },
}
</script>
<style lang="scss">
.noBorderIncludePages{
  margin-bottom:50px;
  .ant-table-body{
    border:1px solid #e8e8e8;
    border-bottom:none;
    border-radius: 5px;
  }
}
</style>
<style lang="scss" scoped>
</style>